<!-- 模块说明 -->
<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <van-tabs v-model:active="active">
      <van-tab title="全部帖子">
        <div class="all">
          <div class="top">
            <div><img src="https://img0.baidu.com/it/u=2047354115,792759665&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=465"
                alt=""></div>
            <div class="username">
              <h3>v2evl_2312</h3>
              <p>11-29 08:49</p>
            </div>
          </div>
          <div class="main">
            <p>杜高犬一岁公狗有人要不</p>
            <img src="https://img1.baidu.com/it/u=2360501455,2621859923&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332"
              alt="">
          </div>
          <div class="footer">
            <div class="address">
              <van-icon name="location-o" /><span>四川省成都市新都区新马路</span>
            </div>
            <div class="comment">
              <van-icon name="like-o" color="#1989fa" /><span>1</span>
              <van-icon name="chat-o" /><span>6</span>
            </div>
          </div>
        </div>
        <div class="all">
          <div class="top">
            <div><img src="https://img0.baidu.com/it/u=2047354115,792759665&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=465"
                alt=""></div>
            <div class="username">
              <h3>v2evl_2312</h3>
              <p>11-29 08:49</p>
            </div>
          </div>
          <div class="main">
            <p>杜高犬一岁公狗有人要不</p>
            <img src="https://img1.baidu.com/it/u=2360501455,2621859923&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332"
              alt="">
          </div>
          <div class="footer">
            <div class="address">
              <van-icon name="location-o" /><span>四川省成都市新都区新马路</span>
            </div>
            <div class="comment">
              <van-icon name="like-o" color="#1989fa" /><span>1</span>
              <van-icon name="chat-o" /><span>6</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="犬">
        <div class="all">
          <div class="top">
            <div><img src="https://img0.baidu.com/it/u=2047354115,792759665&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=465"
                alt=""></div>
            <div class="username">
              <h3>v2evl_2312</h3>
              <p>11-29 08:49</p>
            </div>
          </div>
          <div class="main">
            <p>杜高犬一岁公狗有人要不</p>
            <div class="img">
              <img src="https://img1.baidu.com/it/u=2360501455,2621859923&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332"
                alt="">
            </div>
          </div>
          <div class="footer">
            <div class="address">
              <van-icon name="location-o" /><span>四川省成都市新都区新马路</span>
            </div>
            <div class="comment">
              <van-icon name="like-o" color="#1989fa" /><span>1</span>
              <van-icon name="chat-o" /><span>6</span>
            </div>
          </div>
        </div>
        <div class="all">
          <div class="top">
            <div><img src="https://img0.baidu.com/it/u=2047354115,792759665&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=465"
                alt=""></div>
            <div class="username">
              <h3>v2evl_2312</h3>
              <p>11-29 08:49</p>
            </div>
          </div>
          <div class="main">
            <p>杜高犬一岁公狗有人要不</p>
            <img src="https://img1.baidu.com/it/u=2360501455,2621859923&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332"
              alt="">
          </div>
          <div class="footer">
            <div class="address">
              <van-icon name="location-o" /><span>四川省成都市新都区新马路</span>
            </div>
            <div class="comment">
              <van-icon name="like-o" color="#1989fa" /><span>1</span>
              <van-icon name="chat-o" /><span>6</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="猫">猫</van-tab>
      <van-tab title="其他小宠">其他小宠</van-tab>
      <van-tab title="救助论坛">救助论坛</van-tab>
    </van-tabs>
=======
    广场发布

>>>>>>> jishiwei
  </div>
</template>

<script setup>

import { ref } from 'vue';
const active = ref(0);
</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.all {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 20px;

  .top {
    display: flex;

    img {
      width: 50px;
      height: 50px;
    }

    .username {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 50px;

      h3 {
        font-size: 17px;
      }

      p {
        font-size: 13px;
      }
    }
  }

  .main {
    p {
      padding: 10px 0;
    }

    img {
      width: 100%;
    }
  }

  .footer {
    line-height: 10px;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 10px;

    .address {
      span {
        font-size: 12px;
      }
    }

    .comment {
      span:nth-of-type(1) {
        margin-right: 5px;
      }
    }
  }

  border-bottom: 1px solid #e1e1e1;
}
</style>
